<template>
  <div class="manage">
<!--    <el-button style="float:left" type="primary" @click="dialogFormVisible = true">+ 添加</el-button>-->
<!--    <el-dialog title="添加用户" :visible.sync="dialogFormVisible" style="text-align: center">-->
<!--      <el-form :model="form" :rules="addrules">-->
<!--        <el-form-item label="用户名:" :label-width="formLabelWidth" prop="userName">-->
<!--          <el-input v-model="form.userName" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="密码:" :label-width="formLabelWidth" prop="password">-->
<!--          <el-input v-model="form.password" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="邮箱:" :label-width="formLabelWidth" prop="email">-->
<!--          <el-input v-model="form.email" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="权限:" :label-width="formLabelWidth" prop="authority">-->
<!--          <el-select v-model="form.role" autocomplete="off" style="float: left">-->
<!--            <el-option label="管理员" value="管理员"></el-option>-->
<!--            <el-option label="用户" value="用户"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="状态:" :label-width="formLabelWidth" prop="status">-->
<!--          <el-select v-model="form.status" autocomplete="off" style="float: left">-->
<!--            <el-option label="激活" value="激活"></el-option>-->
<!--            <el-option label="冷却" value="冷却"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="联系方式:" :label-width="formLabelWidth" prop="phone">-->
<!--          <el-input v-model="form.phone" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--          <el-button type="primary" @click="addUser()">确 定</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-dialog>-->
<!--    <el-dialog title="用户信息修改" :visible.sync="edit" modal-append-to-body="false" style="text-align: center">-->
<!--      <el-form ref="edit" :model="editForm" :rules="rules">-->
<!--        <el-form-item label="姓名:" prop="userName" :label-width="formLabelWidth" style="margin-left: 90px">-->
<!--          <el-input v-model="editForm.userName" autocomplete="off" style="width: 60%;float: left">-->
<!--            {{editForm.userName}}-->
<!--          </el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="邮箱:" prop="email" :label-width="formLabelWidth" style="margin-left: 90px">-->
<!--          <el-input v-model="editForm.email" autocomplete="off" style="width: 60%;float: left">-->
<!--            {{editForm.email}}-->
<!--          </el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="权限:" prop="role" :label-width="formLabelWidth" style="margin-left: 90px">-->
<!--          <el-select v-model="editForm.sex" autocomplete="off" style="width: 60%;float: left">-->
<!--            <el-option label="管理员" value="管理员"></el-option>-->
<!--            <el-option label="用户" value="用户"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="联系方式:" prop="phone" :label-width="formLabelWidth" style="margin-left: 90px">-->
<!--          <el-input v-model="editForm.phone" autocomplete="off" style="width: 60%;float: left">-->
<!--            {{editForm.phone}}-->
<!--          </el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button @click="edit = false">取 消</el-button>-->
<!--          <el-button type="primary" @click="editUser">确 定</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-dialog>-->
    <el-table
      :data="tableData"
      height="120%"
      style="width: 100%" stripe>
      <el-table-column
        prop="id"
        label="ID"
        width="100">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>

      <el-table-column
        prop="description"
        label="帖子描述"
        width="180">
      </el-table-column>

      <el-table-column
        prop="create_time"
        label="发表时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="150">
      </el-table-column>
      <el-table-column
        prop="role"
        label="权限"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button size="mini"  @click="deleteById(scope.row)">加精</el-button>
          <el-button size="mini" type="danger" @click="deleteById (scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      total: null,
      tableData: [],
      searchFrom: {
        keyword: ''
      },
      formLabel: [
        {
          model: 'keyword',
          label: ''
        }
      ],
      edit: false,
      editForm: [],
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        userName: '',
        password: '',
        email: '',
        status: '',
        role: ''
      }

    }
  },
  methods: {

    editUser () {
      console.log(this.editForm)
      this.$http.put('http://localhost:9000/forum/user/save', this.editForm).then(res => {
        console.log(res.data)
      })
      this.edit = false
      window.location.reload()
    },
    handleApply: function (index, row) {
      const _this = this
      _this.editForm = row
      _this.edit = true
    }
  },
  created () {
    const _this = this
    this.$http.get('http://localhost:9000/forum/user/list').then(res => {
      console.log(res)
      _this.tableData = res.data
    })
  }
}
</script>

<style lang="scss" scoped>
  .manage {
    height: 70%;

    &-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
  }

  .pager {
    position: absolute;
    right: 20px;
  }
</style>
